import { clsxm } from "../helpers";

type SwitchProps = {
  value: boolean;
  onChange?: (value: boolean) => void;
  className?: string;
};
export function Switch(props: SwitchProps) {
  const { value, onChange, className } = props;
  return (
    <div
      className={clsxm(
        "relative box-content flex w-[3em] cursor-pointer rounded-full bg-zinc-300 p-0.5 transition-colors duration-200",
        value && "bg-green-500",
        className,
      )}
      onClick={() => onChange?.(!value)}
    >
      <div
        className={clsxm(
          "h-[1.5em] w-[1.5em] rounded-full bg-white transition-transform duration-200",
          value && "translate-x-[1.5em]",
        )}
      />
    </div>
  );
}
